<template>
  <div>
    <my-header />
    <div class="body">
      <p>用户注册</p>
      <div class="inp">
        <span>用户名:</span>
        <input v-model="uname" type="text" placeholder="请输入用户名" />
      </div>
      <div class="inp">
        <span>密码:</span>
        <input v-model="pwd" type="text" placeholder="请输入密码" />
      </div>
      <div class="inp">
        <span>手机号:</span>
        <input v-model="phone" type="text" placeholder="请输入手机号" />
      </div>
      <button @click="reg" class="btn">注册</button>
    </div>
    <my-footer />
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
import MyFooter from "@/components/MyFooter.vue";
export default {
  components: { MyHeader, MyFooter },
  data() {
    return {
      uname: "",
      pwd: "",
      phone: "",
    };
  },
  methods: {
    reg() {
      const url = "/user/reg";
      const params = `uname=${this.uname}&pwd=${this.pwd}&phone=${this.phone}`;
      this.axios.post(url, params).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          alert("注册成功");
          this.$router.push("/login");
        } else {
          alert("注册失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  width: 400px;
  height: 300px;
  margin: 100px auto;
  p {
    font-size: 22px;
    text-align: center;
    margin: 20px 0;
    color: saddlebrown;
    padding: 10px;

    border-bottom: 3px solid #c8b49b;
  }
  .inp {
    display: flex;
    justify-content: space-between;
    height: 40px;
    margin-bottom: 10px;
    text-align: center;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    span {
      display: inline-block;
      margin-top: 7px;
      padding: 10px;
      color: #8b4513;
    }
    input {
      width: 70%;
      padding: 0 10px;
      color: saddlebrown;
      border: 0;
      background-color: transparent;
    }
  }
  .btn {
    display: block;
    padding: 10px 50px;
    margin: 20px auto;
    background-color: #3c2314;
    color: #fff;
    border: 1px solid #3c2314;
    border-radius: 3px;
    cursor: pointer;
  }
}
</style>
<style scoped src="../assets/css/login.css"></style>